<template>
  <div class="side-menu-wrapper">
    <div class="side-menu-list">
      <slot></slot>
      <div v-if="collapsed" class="collapsed-menu">
        <div v-for="(item, index) in menuList" :key="`${item.path}-${index}`">
          <collapsed-menu @handleSelect="handleSelect" v-if="item.children && item.children.length >= 0 && item.meta.show != false" :parent-item="item"></collapsed-menu>
          <Tooltip v-else-if="item.meta.show != false" transfer :content="item.meta.title" placement="right" :key="`drop-menu-${item.path}`">
            <a @click="handleSelect(item.path)" :class="$route.path==item.path?'drop-menu checked':'drop-menu'" type="text">
              <Icon size="17" color="var(--menu-title)" v-if="item.meta && item.meta.icon" :type="item.meta.icon"/>
            </a>
          </Tooltip>
        </div>
      </div>
      <Menu ref="sideMenu" v-else width="100%" @on-select="handleSelect" :active-name="$route.path" :open-names="openNames" :accordion="true">
          <div v-for="(item, index) in menuList" :key="`${item.path}-${index}`">
              <side-menu-item v-if="item.children && item.children.length >= 0 && item.meta.show != false" :parent-item="item"></side-menu-item>
              <MenuItem v-else-if="item.meta.show != false" :name="item.path">
                <Icon size="17" v-if="item.meta && item.meta.icon" :type="item.meta.icon"/>
                <span>{{ item.meta.title }}</span>
              </MenuItem>
          </div>
      </Menu>
    </div>
  </div>
</template>
<script>
import SideMenuItem from "./side-menu-item";
import CollapsedMenu from "./collapsed-menu";
import { setCookie , getCookie } from "@/utils/common"
export default {
  name: "SideMenu",
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    },
    collapsed: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  components: {
    SideMenuItem,
    CollapsedMenu
  },
  computed: {
    openNames() {
      if(this.$route.matched && this.$route.matched.length) {
        return this.$route.matched.map((item)=>{
          return item.path;
        });
      } else return []
    }
  },
  data() {
    return {
      // collapsed: false
      // activeName: getCookie("activeName")
    };
  },
  methods: {
    handleCollapsedChange() {
      this.$emit("collapsed", this.collapsed=!this.collapsed);
    },
    handleSelect(activeRoute) {
      this.$emit("goLink", activeRoute)
    },
    updateMenu() {
      !this.collapsed && this.$nextTick(()=>{
        this.$refs.sideMenu.updateActiveName();
        this.$refs.sideMenu.updateOpened();
      })
    }
  },
  // watch: {
    // $route(to,from) {
      // this.historyPage=to.matched.reduce((arr,item)=>{
      //   item.meta.title&&arr.push({
      //     path: item.path,
      //     title: item.meta.title
      //   });
      //   return arr;
      // },[])
      // this.updateMenu();
      // let state = this.menuList.some((res)=>{
      //   return res.name==to.name
      // });
      // if(state) {
        // this.activeName=to.matched[1].name;
        // setCookie("activeName",to.matched[1].name);
      // }
    // }
  // },
  mounted() {
    this.updateMenu()
   }
};
</script>
<style lang="less" scoped>
.side-menu-wrapper {
  width: auto;
  height: 100%;
  background-color: var(--sider-bg);
  color: #fff;
  transition: .2s ease;
  .side-menu-list {
    height: ~"calc(100% - 32px)";
  }
  .ivu-dropdown,.ivu-tooltip {
    display: block;
    text-align: center;
    color: #fff;
    /deep/ .ivu-tooltip-rel {
      width: 100%;
      height: 100%;
      display: block;
    }
    a {
      display: block;
      width: 100%;
      height: 48px;
      line-height: 48px;
      color: #fff;
      &.checked {
        background-color: var(--menu-active-bg);
      }
    }
  }
  .collapsed {
    height: 32px;
    background: var(--sider-bg-collapsed);
    position: relative;
    cursor: pointer;
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 13px;
      height: 12px;
      transition: .2s ease;
      transform-origin: center center;
    }
    &.collapsed-min::after {
      transform: translate(-50%, -50%) rotate(180deg);
    }
  }
}

/deep/ .ivu-menu {
  background-color: var(--sider-bg) !important;
  &::after {
    width: 0;
  }
  .ivu-menu-submenu-title,.ivu-menu-item {
    color: var(--menu-title) !important;
    white-space:nowrap;
    .ivu-menu-submenu-title-icon {
      right: 10px;
    }
  }
  .ivu-menu-item-active:not(.ivu-menu-submenu) {
    background-color: var(--menu-active-bg) !important;
    color: var(--menu-active-title) !important;
    &::after {
      width: 0;
    }
  }
}
</style>
